<template>
    <div>
        <!-- 导航 -->
        <Nav/>
        <!-- 幻灯片 -->
        <div class="banner-wrapper">
            <mu-carousel>
                <mu-carousel-item>
                    <img src="https://misc.rrcimg.com/rop/uploads/EA1t-0AH8T0xPsXB.png">
                </mu-carousel-item>
                <mu-carousel-item>
                    <img src="https://img2.rrcimg.com/rop/uploads/3KOzdJPwQzt3CcdO.png">
                </mu-carousel-item>
                <mu-carousel-item>
                    <img src="https://misc.rrcimg.com/rop/uploads/gdlGO1_Uq8GXozub.png">
                </mu-carousel-item>
                <mu-carousel-item>
                    <img src="https://img1.rrcimg.com/rop/uploads/U_65dWsLNV9jABZk.png">
                </mu-carousel-item>
            </mu-carousel>
        </div>
        <!-- 快速搜索 -->
        <div class="index-buy-sales-wrappe">
            <div class="container">
                <div class="col-lg-8">
                    <div class="col-lg-2">
                        <div class="firstmai">
                            <mu-avatar color="red" size="100">
                                买
                            </mu-avatar>
                        </div>
                        <div>1年/2万公里质保</div>
                    </div>
                    <div class="col-lg-10">
                        <div>
                            <span>大众</span>
                            <span>别克</span>
                            <span>雪佛兰</span>
                            <span>五菱</span>
                            <span>比亚迪</span>
                            <span>奥迪</span>
                        </div>
                        <div>
                            <span>3万以下</span>
                            <span>3-5万</span>
                            <span>5-10万</span>
                            <span>10-15万</span>
                            <span>15-20万</span>
                            <span>20万以上</span>
                        </div>
                        <div>
                            <span>降价车</span>
                            <span>准新车</span>
                            <span>急售车</span>
                            <span>豪华车</span>
                            <span>超值SUV</span>
                            <span>经典跑车</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="col-lg-4">
                        <div class="towmai">
                            <mu-avatar color="red" size="100">
                                卖
                            </mu-avatar>
                        </div>
                    </div>
                    <div class="col-lg-8 right">
                        <div class="maiche">
                            <input type="text" placeholder="手机号码（必填）">
                            <mu-button large color="red">免费卖车</mu-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 推荐位 -->
        <div class="index-bbs-wrapp">
            <div class="container">
                <mu-row gutter>
                    <mu-col span="3">
                        <div class="model">
                            <div class="model-title">分期购车</div>
                            <div class="model-time">低门槛 身披快</div>
                            <div class="model-img" style="background-image: url('https://img1.rrcimg.com/rop/uploads/TgNJiKn__aM8lxi7.png')"></div>
                        </div>
                    </mu-col>
                    <mu-col span="3">
                        <div class="model">
                            <div class="model-title">购车保障</div>
                            <div class="model-time">1年质保 14天可退</div>
                            <div class="model-img" style="background-image: url('https://misc.rrcimg.com/rop/uploads/FhsdM6qqG6suClTi.jpg')"></div>
                        </div>
                    </mu-col>
                    <mu-col span="3">
                        <div class="model">
                            <div class="model-title">行业认证</div>
                            <div class="model-time">中国汽车流通协会认证</div>
                            <div class="model-img" style="background-image: url('https://misc.rrcimg.com/rop/uploads/yTvUiIL8DpD-Ws11.png');background-repeat:no-repeat"></div>
                        </div>
                    </mu-col>
                    <mu-col span="3">
                        <div class="model">
                            <div class="model-title">分期购车</div>
                            <div class="model-time">低门槛 身披快</div>
                            <div class="model-img" style="background-image: url('https://img1.rrcimg.com/rop/uploads/TgNJiKn__aM8lxi7.png')"></div>
                        </div>
                    </mu-col>
                </mu-row>
            </div>
        </div>
        <!-- 产品列表 -->
        <div class="index-car-list-wrapper">
            <div class="container">
                <div class="list-card">
                    <div>
                        <img src="https://img2.rrcimg.com/o_1ch03pfd4453543621926737325953950.jpg" alt="">
                    </div>
                    <div class="title">
                        福特-福克斯 2013款 两厢经典
                    </div>
                    <div class="list-time">
                        2016年10月 / 4.43万公里
                        <span>
                            <mu-badge content="超值" color="green500"></mu-badge>
                            <mu-badge content="急售" color="deepOrange500"></mu-badge>
                        </span>
                    </div>
                    <div class="list-money">
                        <span class="list-money-qian">6.18</span>
                        <span class="list-money-wan">万</span>
                        <span class="list-money-shoufu">首付1.8万</span>
                    </div>
                    <div class="buy">
                        <mu-button color="error">买车</mu-button>
                    </div>
                </div>
                <div class="list-card">
                    <div>
                        <img src="https://img2.rrcimg.com/o_1cgvlclhl2213029548141234757849005.jpg?imageView2/2/interlace/1/w/290/h/192/format/webp" alt="">
                    </div>
                    <div class="title">
                        福特-福克斯 2013款 两厢经典
                    </div>
                    <div class="list-time">
                        2016年10月 / 4.43万公里
                        <span>
                            <mu-badge content="超值" color="green500"></mu-badge>
                            <mu-badge content="急售" color="deepOrange500"></mu-badge>
                        </span>
                    </div>
                    <div class="list-money">
                        <span class="list-money-qian">6.18</span>
                        <span class="list-money-wan">万</span>
                        <span class="list-money-shoufu">首付1.8万</span>
                    </div>
                    <div class="buy">
                        <mu-button color="error">买车</mu-button>
                    </div>
                </div>
                <div class="list-card">
                    <div>
                        <img src="https://img2.rrcimg.com/o_1ch0hjrgv1676530928504212405341661.jpg?imageView2/2/interlace/1/w/290/h/192/format/webp" alt="">
                    </div>
                    <div class="title">
                        福特-福克斯 2013款 两厢经典
                    </div>
                    <div class="list-time">
                        2016年10月 / 4.43万公里
                        <span>
                            <mu-badge content="超值" color="green500"></mu-badge>
                            <mu-badge content="急售" color="deepOrange500"></mu-badge>
                        </span>
                    </div>
                    <div class="list-money">
                        <span class="list-money-qian">6.18</span>
                        <span class="list-money-wan">万</span>
                        <span class="list-money-shoufu">首付1.8万</span>
                    </div>
                    <div class="buy">
                        <mu-button color="error">买车</mu-button>
                    </div>
                </div>
                <div class="list-card">
                    <div>
                        <img src="https://img2.rrcimg.com/o_1ch0fgc8j191486521205595588420413.jpg?imageView2/2/interlace/1/w/290/h/192/format/webp" alt="">
                    </div>
                    <div class="title">
                        福特-福克斯 2013款 两厢经典
                    </div>
                    <div class="list-time">
                        2016年10月 / 4.43万公里
                        <span>
                            <mu-badge content="超值" color="green500"></mu-badge>
                            <mu-badge content="急售" color="deepOrange500"></mu-badge>
                        </span>
                    </div>
                    <div class="list-money">
                        <span class="list-money-qian">6.18</span>
                        <span class="list-money-wan">万</span>
                        <span class="list-money-shoufu">首付1.8万</span>
                    </div>
                    <div class="buy">
                        <mu-button color="error">买车</mu-button>
                    </div>
                </div>
                <div class="list-card">
                    <div>
                        <img src="https://img2.rrcimg.com/o_1ce68ia0h5271439212132923051826059.jpg?imageView2/2/interlace/1/w/290/h/192/format/webp" alt="">
                    </div>
                    <div class="title">
                        福特-福克斯 2013款 两厢经典
                    </div>
                    <div class="list-time">
                        2016年10月 / 4.43万公里
                        <span>
                            <mu-badge content="超值" color="green500"></mu-badge>
                            <mu-badge content="急售" color="deepOrange500"></mu-badge>
                        </span>
                    </div>
                    <div class="list-money">
                        <span class="list-money-qian">6.18</span>
                        <span class="list-money-wan">万</span>
                        <span class="list-money-shoufu">首付1.8万</span>
                    </div>
                    <div class="buy">
                        <mu-button color="error">买车</mu-button>
                    </div>
                </div>
                <div class="list-card">
                    <div>
                        <img src="https://img2.rrcimg.com/o_1cge6p1du6088752848174423750338332.jpg?imageView2/2/interlace/1/w/290/h/192/format/webp" alt="">
                    </div>
                    <div class="title">
                        福特-福克斯 2013款 两厢经典
                    </div>
                    <div class="list-time">
                        2016年10月 / 4.43万公里
                        <span>
                            <mu-badge content="超值" color="green500"></mu-badge>
                            <mu-badge content="急售" color="deepOrange500"></mu-badge>
                        </span>
                    </div>
                    <div class="list-money">
                        <span class="list-money-qian">6.18</span>
                        <span class="list-money-wan">万</span>
                        <span class="list-money-shoufu">首付1.8万</span>
                    </div>
                    <div class="buy">
                        <mu-button color="error">买车</mu-button>
                    </div>
                </div>
                <div class="list-card">
                    <div>
                        <img src="https://img2.rrcimg.com/o_1cfpfmnk2590143383443279266149267.jpg?imageView2/2/interlace/1/w/290/h/192/format/webp" alt="">
                    </div>
                    <div class="title">
                        福特-福克斯 2013款 两厢经典
                    </div>
                    <div class="list-time">
                        2016年10月 / 4.43万公里
                        <span>
                            <mu-badge content="超值" color="green500"></mu-badge>
                            <mu-badge content="急售" color="deepOrange500"></mu-badge>
                        </span>
                    </div>
                    <div class="list-money">
                        <span class="list-money-qian">6.18</span>
                        <span class="list-money-wan">万</span>
                        <span class="list-money-shoufu">首付1.8万</span>
                    </div>
                    <div class="buy">
                        <mu-button color="error">买车</mu-button>
                    </div>
                </div>
                <div class="list-card">
                    <div>
                        <img src="https://img2.rrcimg.com/o_1cfkh078v26743146813910574566459.jpg?imageView2/2/interlace/1/w/290/h/192/format/webp" alt="">
                    </div>
                    <div class="title">
                        福特-福克斯 2013款 两厢经典
                    </div>
                    <div class="list-time">
                        2016年10月 / 4.43万公里
                        <span>
                            <mu-badge content="超值" color="green500"></mu-badge>
                            <mu-badge content="急售" color="deepOrange500"></mu-badge>
                        </span>
                    </div>
                    <div class="list-money">
                        <span class="list-money-qian">6.18</span>
                        <span class="list-money-wan">万</span>
                        <span class="list-money-shoufu">首付1.8万</span>
                    </div>
                    <div class="buy">
                        <mu-button color="error">买车</mu-button>
                    </div>
                </div>
                <div class="list-card">
                    <div>
                        <img src="https://img2.rrcimg.com/o_1caa1rf4h75068262111503694950562.jpg?imageView2/2/interlace/1/w/290/h/192/format/webp" alt="">
                    </div>
                    <div class="title">
                        福特-福克斯 2013款 两厢经典
                    </div>
                    <div class="list-time">
                        2016年10月 / 4.43万公里
                        <span>
                            <mu-badge content="超值" color="green500"></mu-badge>
                            <mu-badge content="急售" color="deepOrange500"></mu-badge>
                        </span>
                    </div>
                    <div class="list-money">
                        <span class="list-money-qian">6.18</span>
                        <span class="list-money-wan">万</span>
                        <span class="list-money-shoufu">首付1.8万</span>
                    </div>
                    <div class="buy">
                        <mu-button color="error">买车</mu-button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 页脚 -->
        <Footer/>
    </div>
</template>

<script>

    import Nav from '../components/Nav.vue';
    import Footer from '../components/Footer.vue'

    export default {
        components: {
            Nav,
            Footer
        },
        data() {
            return {

            }
        }
    }

</script>

<style scoped>
    body {
        background-color: #F2F2F3;
    }

    .index-buy-sales-wrappe {
        background-color: white;
    }

    .col-lg-10 div:first {
        margin-top: 20px;
    }

    .col-lg-10 div>span {
        display: inline-block;
        padding: 10px;
        padding-top: 15px;
        font-size: .8rem;
    }

    .mu-carousel {
        height: 350px;
    }

    .maiche {
        margin: 10% 0;
    }

    .maiche input {
        width: 200px;
        padding: 10px;
    }

    .maiche button {
        padding: 10px;
        margin-top: 10px;
        width: 200px;
    }

    .firstmai {
        margin-top: 15px;
    }

    .firstmai+div {
        font-size: 13px;
        margin-top: 5px;
        color: #7e7b7b;
    }

    .towmai {
        margin-top: 15px;
    }

    .model {
        margin: 20px;
        background-color: white;
        width: 95%;
        height: 250px;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    }

    .model-title,
    .model-time {
        text-align: center;
    }

    .model-title {
        padding: 10px;
        font-size: 20px;
    }

    .model-time {
        font-size: 14px;
        color: rgb(114, 113, 113);
    }

    .model-img {
        width: 190px;
        height: 153px;
        margin: 0 auto;
    }

    .index-car-list-wrapper {
        background-color: white;
        overflow: hidden;
    }

    .list-card {
        width: 33%;
        padding: 10px;
        /* padding-left: 10px; */
        /* padding-right: 0; */
        border: 1px solid #fff;
        margin-top: 10px;
        margin-bottom: 10px;
        float: left;
    }

    .list-card:hover {
        border: 1px solid orangered;
    }

    .list-card .title {
        margin-top: 10px;
        overflow: hidden;
    }

    .list-time {
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: 12px;
        color: #9e9e9e;
    }

    .list-money-qian {
        font-size: 23px;
        color: orangered;
    }

    .list-money-wan {
        font-size: 14px;
        color: orangered;
        margin-right: 10px;
    }

    .list-money-shoufu {
        font-size: 14px;
        color: #9e9e9e;
    }

    .buy {
        text-align: right;
    }
</style>